/**
 * @Date 2023-02-23 14:45:35
 * @Remark
 */

// react
import React, { useEffect } from "react";
// lib
import { Card, Col, Row,Statistic, Table } from "antd";
// components & widget
// import CoreDataBox from "./CoreDataBox";
// style
import "./style.scss"
// config
// script & methods & public
// store
import { observer } from "mobx-react";
import { didMount } from "./controller";
import { state } from "./state";
import { Link } from "react-router-dom";
import { userState } from "state/global";
// controller
// interface
// 其它
const TableColumns = [
  {
    title: "排序",
    render:(text:any,record:any,index:number) => `${index+1}`,
  },
  {
    title: "书名",
    dataIndex: "title",
  },
  {
    title: "作者",
    dataIndex: "author",
  },
  {
    title: "数量",
    dataIndex: "borrowCount",
  },
]
function Dashboard() {
  const userData = state.getUserHomeData();
  const adminData = state.getAdminHomeData();
  useEffect(() => {
    didMount();
    return () => {
      //
    };
  }, []);

  return (
    <div className="main-transparent">
      {userState.isUser() && (<>
        <Card title="数据总览" bordered={false} className="mt-15">
          <Row>
            <Link to={"/main/borrow/borrow-record"} style={{ flex: 1, textAlign: "center" }}>
              <Col>
                <Statistic
                  title="当前借阅"
                  value={userData?.borrowCount}
                  suffix="本"
                />
              </Col>
            </Link>
            <Link to={"/main/borrow/order-record"} style={{ flex: 1, textAlign: "center" }}>
              <Col>
                <Statistic
                  title="当前预约"
                  value={userData?.orderCount}
                  suffix="本"
                />
              </Col>
            </Link>
            <Link to={"/main/Illegal/overdue-record"} style={{ flex: 1, textAlign: "center" }}>
              <Col>
                <Statistic
                  title="累计罚金"
                  value={userData?.illegalCount}
                  suffix="元"
                />
              </Col>
            </Link>
          </Row>
        </Card>
        <Card title="待处理违规" bordered={false} className="mt-15">
          <Row className="mt-20">
            <Link to={"/main/Illegal/overdue-record"} style={{ flex: 1, textAlign: "center" }}>
              <Col>
                <Statistic
                  title="逾期"
                  value={userData?.expiry}
                />
              </Col>
            </Link>
            <Link to={"/main/Illegal/damage-record"} style={{ flex: 1, textAlign: "center" }}>
              <Col>
                <Statistic
                  title="污损"
                  value={userData?.damage}
                />
              </Col>
            </Link>
            <Link to={"/main/Illegal/recharge-record"} style={{ flex: 1, textAlign: "center" }}>
              <Col>
                <Statistic
                  title="丢失"
                  value={userData?.lost}
                />
              </Col>
            </Link>
          </Row>
        </Card>
      </>)}
      {!userState.isUser() && (
        <>
          <Card title="数据概况" bordered={false}>
            <Row>
              <Link to={"/main/user"} style={{ flex: 1, textAlign: "center" }}>
                <Col>
                  <Statistic
                    title="注册用户"
                    value={adminData?.userCount}
                    suffix="人"
                  />
                </Col>
              </Link>
              <Link to={"/main/borrow/borrow-record"} style={{ flex: 1, textAlign: "center" }}>
                <Col>
                  <Statistic
                    title="借阅总量"
                    value={adminData?.borrowCount}
                    suffix="次"
                  />
                </Col>
              </Link>
              <Link to={"/main/borrow/order-record"} style={{ flex: 1, textAlign: "center" }}>
                <Col>
                  <Statistic
                    title="预约总量"
                    value={adminData?.orderCount}
                    suffix="次"
                  />
                </Col>
              </Link>
              <Link to={"/main/Illegal/overdue-record"} style={{ flex: 1, textAlign: "center" }}>
                <Col>
                  <Statistic
                    title="违规总量"
                    value={adminData?.illegalCount}
                    suffix="次"
                  />
                </Col>
              </Link>
            </Row>
          </Card>
          <Card title="图书数据" bordered={false} className="mt-15">
            <Row>
              <Link to={"/main/books/book-item"} style={{ flex: 1, textAlign: "center" }}>
                <Col>
                  <Statistic
                    title="图书数量"
                    value={adminData?.bookCount}
                    suffix="种"
                  />
                </Col>
              </Link>
              <Link to={"/main/books/book-copy"} style={{ flex: 1, textAlign: "center" }}>
                <Col>
                  <Statistic
                    title="副本数量"
                    value={adminData?.copyCount}
                    suffix="本"
                  />
                </Col>
              </Link>
              <Link to={"/main/borrow/borrow-record"} style={{ flex: 1, textAlign: "center" }}>
                <Col>
                  <Statistic
                    title="当前借出"
                    value={adminData?.borrowedCount}
                    suffix="本"
                  />
                </Col>
              </Link>
              <Link to={"/main/Illegal/overdue-record"} style={{ flex: 1, textAlign: "center" }}>
                <Col>
                  <Statistic
                    title="累计罚金"
                    value={adminData?.illegal}
                    prefix="¥"
                    suffix="元"
                  />
                </Col>
              </Link>
            </Row>
          </Card>
        </>
      )}
      <div className="div2">
        <div className="div22">
        <Card title="15日热门借阅" bordered={false} className="mt-15">
          <Table
            className="main-table"
            columns={TableColumns}
            dataSource={state.getHotBorrow()}
            rowKey={(_, index) => index || 1}
            bordered
            pagination={false}
            scroll={{ x: "max-content" }}
          />
          </Card>
        </div>
        <div className=""></div>
        <div className="div22">
        <Card title="15日热门预约" bordered={false} className="mt-15">
          <Table
            className="main-table"
            columns={TableColumns}
            dataSource={state.getHotOrder()}
            rowKey={(_, index) => index || 1}
            bordered
            pagination={false}
            scroll={{ x: "max-content" }}
          />
          </Card>
          </div>
      </div>
    </div>
  );
}

export default observer(Dashboard);
